import React from "react";
import {Form, Modal, Select, Switch, Radio, Input} from "antd";
import { openNotificationWithIcon } from "../../../../utils/comm";
import { prefixedAction } from "../models/commentConfigureModel";

const { Option } = Select;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

export const CommentTypeAll = 'ALL';
export const CommentTypeUnique = 'UNIQUE';
export const renderTypeMap = {
  [CommentTypeAll]: '全部',
  [CommentTypeUnique]: '特定流程',
};

const formItemLayout1 = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

@Form.create()
class CreateForm extends React.Component {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
    this.inputRef = React.createRef();
    this.textareaRef = React.createRef();
    this.flowVisible=(props.data.type=='UNIQUE');
  }

  componentDidMount() {
    // const { form } = this.props;
    // const { flowVisible } = this.flowVisible;
    // if (!flowVisible) {
    //   form.setFieldsValue({ type: CommentTypeAll });
    // }
  }

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const { form, dispatch, data,  flowModelList } = this.props;

    form.validateFields((err, values) => {
      if (err) {
        return;
      }

      let type = prefixedAction("addComment");
      const params = {  ...values };
      if (data) {
        type = prefixedAction("editComment");
        params.id = data.id;
        params.userId=data.userId;
      }
      
      
      for(const commentFlow of flowModelList) {
        if (commentFlow.modelId === params.flowId) {
          params.flowName = commentFlow.modelName;
          break;
        }
      }

      params.status = params.status ? 1 : 0;
      //
      // for(const msgThemeType of msgThemeTypeList) {
      //   if (msgThemeType.templateId === params.messageThemCode) {
      //     params.messageThemName = msgThemeType.templateName;
      //     break;
      //   }
      // }

      dispatch({ type, payload: params }).then((resp) => {
        const { errCode, errortext } = resp;
        if (errCode === 0) {
          this.handleCancel(true);
          form.resetFields();
          this.openNotificationWithIcon("success", "", errortext || "操作成功");
        } else {
          this.openNotificationWithIcon("warning", "", errortext || "操作失败");
        }
      });
    });
  };

  handleCancel = (isQuery = false) => {
    const { handleCreateVisible } = this.props;
    handleCreateVisible(false, "", isQuery);
  };

  onRadioChange = (e) => {
    this.flowVisible=e.target.value =='UNIQUE' ;
  };

  render() {
    const { form, visible, confirmLoading, data = {}, title = "", flowModelList } = this.props;
    const record = data || {};
    const { getFieldDecorator } = form;
    
    return (
      <Modal
        title={title}
        visible={visible}
        onOk={this.handleOk}
        onCancel={() => this.handleCancel()}
        width="582px"
        centered
        confirmLoading={confirmLoading}
      >
        <Form>
          <Form.Item label="审批意见类型" {...formItemLayout1}>
            {getFieldDecorator('type', {
              rules: [{ required: true, message: '请选择审批意见类型' }],
              initialValue: record.type ? record.type : CommentTypeAll,
            })(
              <RadioGroup onChange={this.onRadioChange}>
                <Radio value={CommentTypeAll}>全部</Radio>
                <Radio value={CommentTypeUnique}>特定流程</Radio>
              </RadioGroup>,
            )}
          </Form.Item>
          {this.flowVisible&&(
<Form.Item label="所属流程" {...formItemLayout1}  >
            {getFieldDecorator('flowId', {
              initialValue: record.flowId,
              rules: [{required: false, message: '请选择所属流程', default: "flowname"}],
            })(
                <Select placeholder="请选择所属流程">
                  {Array.isArray(flowModelList) &&
                  flowModelList.map((item = {}) => (
                      <Option key={item.modelId} value={item.modelId}>
                        {item.modelName}
                      </Option>
                  ))}
                </Select>,
            )}
          </Form.Item>
)
          }
          <Form.Item label="审批意见内容" {...formItemLayout1}>
            {getFieldDecorator("content", {
              initialValue: record.content,
              rules: [{ max: 100, message: "请不要超过100个字符" }],
            })(<TextArea placeholder="请输入审批意见" rows={4} />)}
          </Form.Item>
           <Form.Item label="开启状态" {...formItemLayout1}>
            {getFieldDecorator("status", {
              initialValue: Boolean(Number(record.status)) || false,
              rules: [{ required: true, message: "" }],
              valuePropName: 'checked',
            })(
              <Switch />
                // checked={Boolean(Number(status))}
                // onChange={() => this.handleSwitchChange(status)}
            )}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default CreateForm;
